<template>
  <div id="app">
    <div id="cd">
      <img src="../src/img/cxx.png" id="cxx">
    <h4 class="zi" >餐 饮 管 理 系 统</h4>
  </div>
  <div id="s">
    
    <router-view></router-view>
</div>
<div id="tu"><img src="../src/img/gli.png" id="xxd"></div>
<div id="xd">

<div class="outer">
  <div class="inner" @click="s()">
 <router-link to="/home" class="x" ><h2 @click="xx()">首页</h2></router-link> 
  <ul></ul>
  <router-link to="/about" class="x"><h2>用户管理</h2></router-link>
    <ul>
      <li>用户添加</li>
    </ul>
</div>
<div class="inner" @click="s()">
  <router-link to="/shop" class="x"><h2>商品管理</h2></router-link>
    <ul>
      <router-link to="/add"><li>商品添加</li></router-link>
    </ul>
</div>
<div class="inner" @click="s()">

<router-link to="/Orders">
  <h2>订单管理</h2>
</router-link>
<router-link to="/OrdersAdd">
  <ul>
      <li @click="toAdd">订单添加</li>
  </ul>
</router-link>
  
</div>
<div class="inner" @click="s()">
  <router-link to="/login" class="x" ><h2>登录</h2></router-link>
    <ul>
      <router-link to="/register" class="x"> <li>注册</li></router-link>
    </ul>
</div>
</div>
</div>
</div>

</template>

<script>
export default { 
  name: 'App',


  methods:{
    xx(){
      this.$bus.$emit("xxdd",55);
    },
    s(){
      var h2 = document.getElementsByTagName("h2");
            var ul = document.getElementsByTagName("ul");
            for (let i = 0; i <h2.length ; i++) {
             h2[i].index = i;
             h2[i].onclick = function () {
                 if (ul[this.index].className == ""){
                     ul[this.index].className = "ul";
                 }else {
                     ul[this.index].className = "";
                 }
             }
            }
    }
  }
}
</script>

<style>
#cxx{
  width: 1278px;
  height: 100px;
}
#xxd{
  width: 200px;
  height: 100px;
}
#tu{
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #a52020;
}
#xd{
  position: absolute;
  background-color: rgb(0,3,73,0.5);
  top: 100px;

  width: 200px;
  height: 650px;
}
#cd{
  position: absolute;
  background-color: #ff4949;
  width: 1278px;
  height: 200px;
  left: 200px;
}
.zi{
position: absolute;
left: 500px;
top: -50px;
font-size: 50px;
color: #4411ff;
}
.x{
  text-decoration: none;
  color: #000;
}
 .outer{
  position: absolute;
  left: 0px;
  width: 200px;
            border: 1px solid rgb(0, 0, 0);
        }
#s {
  position: absolute;
  width: 1278px;
  height: 650px;
  left: 200px;
  top: 100px;
  background-color: #e2e2e2;
}
#app{
  background-color: #8eb8d7;
  width: 1478px;
  height: 750px;
}
body{
  margin: 0%;
}
.outer .inner{
            width: 200px;
        }
        .outer .inner ul{
            list-style: none;
        }
        h2{
            border: 1px solid rgb(255, 255, 255);
            height: 30px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            color: #ffffff;
            margin: 0;
        }
        ul{
            display: none;
          

        }
        .ul{
            display: block;
            background-color: cornflowerblue;
            margin: 0;
        }
        ul li{
            border: 1px solid cornflowerblue;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            margin-left: -42px;
            cursor: pointer;
        }
</style>
